<template>
    <div class="edu-page-warp">
        <condition-card @reset="reset" @search="getEduProfessions">
            <!--  v-if="isShowHandle" -->
            <el-row>
                <el-col :span="8">
                       <el-form-item :label="$t('culture.profession.categoryCode')">
                        <DictSelect v-model="queryForm.categoryCode" :data="options.categoryCode" @change="handleQueryProfessionClassList"></DictSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('culture.profession.professionClassCode')">
                        <DictSelect
                            v-model="queryForm.professionClassCode"
                            :data="options.professionClass"
                        ></DictSelect>
                    </el-form-item>
                </el-col>
            </el-row>
        </condition-card>

        <el-card shadow="never">
            <div class="edu-page-title" style="margin-bottom:16px">{{$t('message.eduMajorList')}}</div>
            <div class="edu-opertion-bar" style="margin-bottom:16px">
                <div class="float-left">
                    <el-input
                        v-model="queryForm.keyWord"
                        :placeholder="$t('professions.plsInputProCodeOrProName')"
                        style="width:250px"
                        @keyup.enter.native="getEduProfessions"
                    >
                        <i
                            class="el-icon-search"
                            slot="suffix"
                            style="margin-top:10px;cursor:pointer"
                            @click="getEduProfessions"
                        ></i>
                    </el-input>
                </div>
                <div class="float-right" v-if="isShowHandle">
                    <el-dropdown @command="importRecord">
                        <el-button>
                            {{$t('message.import')}}
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="in">{{$t('message.import')}}</el-dropdown-item>
                            <el-dropdown-item command="out">{{$t('message.down')}}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-button type="primary" @click="exportEduPro">{{$t("message.export")}}</el-button>
                    <!-- <el-button @click="importFiles">{{$t("message.import")}}</el-button>
                    <el-button @click="downFiles">{{$t('message.down')}}</el-button>-->
                    <el-button type="primary" @click="addProfession">{{$t("message.add")}}</el-button>
                </div>
            </div>
            <el-table
                :data="tableData"
                size="mini"
                @selection-change="handleSelectionChange"
                stripe
                tooltip-effect="light"
            >
                <!-- <edu-table-column type="selection" width="30"></edu-table-column> -->
                <edu-table-column type="index" width="60px" :label="$t('message.order')"></edu-table-column>
                <edu-table-column
                    min-width="80px"
                    :label="$t('culture.profession.cateCode')"
                    prop="categoryCode"
                />
                <edu-table-column
                    :label="$t('culture.profession.cateCodeName')"
                    min-width="80px"
                    prop="categoryName"
                />
                <edu-table-column
                    :label="$t('culture.profession.proClassCode')"
                    min-width="90px"
                    prop="professionClassCode"
                />
                <edu-table-column
                    :label="$t('culture.profession.proClassCodeName')"
                    min-width="90px"
                    prop="professionClassName"
                />
                <edu-table-column
                    :label="$t('culture.profession.proCode')"
                    min-width="90px"
                    prop="professionCode"
                />
                <edu-table-column :label="$t('culture.profession.proCodeName')" width="280">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            @click="detailEduPro(scope.row.professionCode)"
                            size="mini"
                        >{{$t(scope.row.professionName)}}</el-button>
                    </template>
                </edu-table-column>
                <edu-table-column :label="$t('culture.profession.approvalTime')" min-width="100px">
                    <template slot-scope="scope">{{formatDate(scope.row.approvalTime*1000)}}</template>
                </edu-table-column>
                <edu-table-column
                    :label="$t('culture.profession.recruitStartTime')"
                    min-width="100px"
                >
                    <template slot-scope="scope">{{formatDate(scope.row.recruitStartTime*1000)}}</template>
                </edu-table-column>
                <edu-table-column :label="$t('culture.profession.stopTime')" min-width="100px">
                    <template slot-scope="scope">{{formatDate(scope.row.stopTime*1000)}}</template>
                </edu-table-column>
                <edu-table-column :label="$t('culture.profession.againTime')" min-width="100px">
                    <template slot-scope="scope">{{formatDate(scope.row.againTime*1000)}}</template>
                </edu-table-column>
                <edu-table-column label="用途">
                    <template slot-scope="scope">{{
                        getUseType(scope.row.useType)
                    }}</template>
                </edu-table-column>
                <edu-table-column
                    :label="$t('message.operating')"
                    min-width="110px"
                    fixed="right"
                    v-if="isShowHandle"
                >
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            @click="editProfession(scope.row.professionCode)"
                            size="mini"
                        >{{$t('message.edit')}}</el-button>
                        <el-button
                            type="text"
                            @click="delProfession(scope.row.professionCode)"
                            size="mini"
                        >{{$t('message.delete')}}</el-button>
                        <!--   <el-button type="text" @click="editTemplate" v-if="functions['edit_workflow']" size="mini">{{$t('message.edit')}}</el-button>
                        <el-button type="text" @click="deleteTemplate(scope.row)" v-if="functions['delete_workflow']" size="mini">{{$t('message.delete')}}</el-button>-->
                    </template>
                </edu-table-column>
            </el-table>
            <div class="edu-pagination">
                <div class="float-right">
                    <el-pagination
                        @size-change="onPageSizeChange"
                        @current-change="onCurrentPageChange"
                        :current-page="queryForm.pageNum_"
                        :page-sizes="[20,50,100,500,1000]"
                        :page-size="queryForm.pageSize_"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="queryForm.total_"
                        style="float: right;margin:10px 60px 0 0;"
                    ></el-pagination>
                </div>
            </div>
        </el-card>
        <!-- 编辑/新增页面 -->
        <el-dialog
            :title="dialogTitle"
            :width="$store.state.common.dialogWidth1000"
            :visible.sync="showDialog"
            @close="resetFormValidate()"
            :close-on-click-modal="false"
            v-drag-dialog
        >
            <el-form
                :model="model"
                ref="model"
                label-position="right"
                label-width="120px"
                :rules="rules"
                label-suffix=":"
            >
                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            prop="professionCode"
                            :label="$t('culture.profession.proCode')"
                        >
                            <el-input
                                :disabled="isEdit !=0"
                                v-model="model.professionCode"
                                :placeholder="$t('professions.plsInputProfessionCode')"
                                style="width: 100%;"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            :label="$t('culture.profession.proCodeName')"
                            prop="professionName"
                        >
                            <el-input
                                :disabled="isEdit !=0"
                                v-model="model.professionName"
                                :placeholder="$t('professions.plsInputProfessionName')"
                                style="width: 100%;"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            :label="$t('culture.profession.proCodeNameEn')"
                            prop="professionNameEn"
                        >
                            <el-input
                                :disabled="isEdit !=0"
                                v-model="model.professionNameEn"
                                :placeholder="$t('professions.plsInputProfessionNameEn')"
                                style="width: 100%;"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            prop="categoryCode"
                            :label="$t('culture.profession.categoryCode')"
                        >
                            <el-select
                                :disabled="isEdit !=0"
                                v-model="model.categoryCode"
                                :placeholder="$t('common.pla.pleaseSelect')"
                                style="width: 100%;"
                                @change="handleModelProfessionClassList"
                            >
                                <el-option
                                    v-for="item in options.categoryCode"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            prop="professionClassCode"
                            :label="$t('culture.profession.professionClassCode')"
                        >
                            <el-select
                                :disabled="isEdit !=0"
                                v-model="model.professionClassCode"
                                :placeholder="$t('common.pla.pleaseSelect')"
                                style="width: 100%;"
                            >
                                <el-option
                                    v-for="item in options.professionClass2"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('culture.profession.approvalTime')">
                            <el-date-picker
                                :disabled="isEdit==1"
                                v-model="model.approvalTime"
                                type="date"
                                format="yyyy-MM-dd"
                                style="width: 100%;"
                                value-format="timestamp"
                                :placeholder="$t('professions.plsChooseDate')"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item :label="$t('culture.profession.recruitStartTime')">
                            <el-date-picker
                                :disabled="isEdit==1"
                                v-model="model.recruitStartTime"
                                type="date"
                                format="yyyy-MM-dd"
                                value-format="timestamp"
                                style="width: 100%;"
                                :placeholder="$t('professions.plsChooseDate')"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('culture.profession.stopTime')">
                            <el-date-picker
                                :disabled="isEdit==1"
                                v-model="model.stopTime"
                                type="date"
                                format="yyyy-MM-dd"
                                value-format="timestamp"
                                style="width: 100%;"
                                :placeholder="$t('professions.plsChooseDate')"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item :label="$t('culture.profession.againTime')">
                            <el-date-picker
                                :disabled="isEdit==1"
                                v-model="model.againTime"
                                type="date"
                                format="yyyy-MM-dd"
                                value-format="timestamp"
                                style="width: 100%;"
                                :placeholder="$t('professions.plsChooseDate')"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="用途">
                            <el-select
                                :disabled="isEdit==1"
                                v-model="model.useType"
                                style="width: 100%;"
                            >
                                <el-option
                                    v-for="item in options.useType"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer">
                <el-button v-if="isEdit==1" @click="cancel">{{$t('message.shut')}}</el-button>
                <el-button v-if="isEdit!=1" @click="cancel">{{$t('message.cancel')}}</el-button>
                <el-button
                    type="primary"
                    v-if="isEdit!=1"
                    @click="confirm"
                >{{ $t('message.confirm') }}</el-button>
            </span>
        </el-dialog>

        <!-- 导入页面 -->
        <edu-dialog
            :title="$t('culture.profession.importEduProfession')"
            width="600px"
            ref="uploadDialog"
            @close="clearFiles"
            @confirm="uploadFile"
        >
            <el-form label-width="85px">
                <el-row>
                    <el-form-item>
                        <el-upload
                            ref="upload"
                            :data="{}"
                            :on-success="uploadDone"
                            :before-upload="beforeAvatarUpload"
                            :before-remove="beforeRemove"
                            :on-error="onError"
                            :multiple="false"
                            :on-change="(file, fileList)=>{this.fileList = fileList}"
                            :limit="1"
                            :accept="'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel'"
                            :action="importUrl"
                            :auto-upload="false"
                        >
                            <!--  'application/vnd.ms-excel'-->
                            <el-button
                                slot="trigger"
                                size="small"
                                type="primary"
                            >{{$t('label.selectFile')}}</el-button>
                            <div
                                slot="tip"
                                class="el-upload__tip"
                            >{{$t('culture.profession.uploadXLSFileOnly')}}</div>
                        </el-upload>
                    </el-form-item>
                </el-row>
            </el-form>
        </edu-dialog>
    </div>
</template>
<script>
import bus from "common/src/utils/bus";
import { queryDic } from "common/src/api/dictionary";
import {
    findMinstryEduProfessionList,
    findCategoryList,
    findProfessionClassList,
    exportEduProfession,
    addEduPro,
    updateEduPro,
    findEduProByProCode,
    isProCodeExist,
    delEduProByCode,
    downloadUrl,
    uploadUrl,
    upload
} from "common/src/api/culture/eduProfession";
import mixin from 'common/src/mixins/index';
const ELECTIVE_TYPE = {
    //对话框，0：可见, 1：文本(显示文本不可修改), 2, 修改   公用魔法数字
    TEXT: 0,
    READONLY: 1,
    UPDATE: 2
};
export default {
    name: "eduProfession",
    mixins: [mixin],
    data() {
        var validateCode = (rule, value, callback) => {
            if (this.isEdit == ELECTIVE_TYPE.TEXT) {
                var regex = /^\d{6}[TK]{0,2}$/;
                if (regex.test(value)) {
                    callback();
                } else {
                    callback(
                        new Error(this.$t("culture.rules.plsInputSixNum"))
                    );
                }
            } else {
                callback();
            }
        };
        var validateName = (rule, value, callback) => {
            var regex = /^[\u4E00-\u9FA50-9\(\)\s\S]{2,30}$/;
            if (regex.test(value)) {
                callback();
            } else {
                callback(new Error(this.$t("professions.wordLimited")));
            }
        };
        var validateNameEn = (rule, value, callback) => {
            var regex = /^[A-Za-z0-9\(\)\s\S]{0,30}$/;
            if (regex.test(value)) {
                callback();
            } else {
                callback(new Error(this.$t("professions.enWordLimited")));
            }
        };
        return {
            importUrl: uploadUrl,
            tableData: [],
            isEdit: ELECTIVE_TYPE.TEXT,
            showDialog: false,
            dialogTitle: "",
            options: {
                categoryCode: [],
                professionClass: [],
                professionClass2:[],
                useType:[{
                    label:'专业管理',
                    value:'1'
                },
                {
                    label:'学籍管理',
                    value:'2'
                }]
            },
            //是否显示操作按钮
            isShowHandle: false,
            queryForm: {
                pageNum_: 1,
                pageSize_: 20,
                total_: 0,
                categoryCode: "",
                professionClassCode: "",
                keyWord: ""
            },
            model: {
                categoryCode: "",
                professionClassCode: "",
                professionCode: "",
                professionName: "",
                professionNameEn: "",
                approvalTime: 0,
                recruitStartTime: 0,
                stopTime: 0,
                againTime: 0,
                useType:'1'
            },
            rules: {
                professionCode: [
                    {
                        required: true,
                        message: this.$t("culture.rules.plsInputProCode"),
                        trigger: "blur"
                    },
                    {
                        validator: validateCode,
                        trigger: "blur"
                    },
                    {
                        validator: this.isExist,
                        trigger: "blur"
                    }
                ],
                professionName: [
                    {
                        required: true,
                        message: this.$t("culture.rules.proNameReq"),
                        trigger: "blur"
                    },
                    {
                        validator: validateName,
                        trigger: "blur"
                    }
                ],
                professionNameEn: [
                    {
                        required: false,
                        message: this.$t("culture.rules.proNameEnReq"),
                        trigger: "blur"
                    },
                    {
                        validator: validateNameEn,
                        trigger: "blur"
                    }
                ],
                categoryCode: [
                    {
                        required: true,
                        message: this.$t("culture.rules.plsChooseCategoryCode"),
                        trigger: "blur"
                    }
                ],
                professionClassCode: [
                    {
                        required: true,
                        message: this.$t("culture.rules.professionClassCode"),
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    created() {
        // this.$store.getters.getFuncUnderPage(this.$route.path).then(funcs => {
        //     this.functions = funcs;
        // });
    },
    mounted() {
        //进入页面根据管理员和教务员判断操作按钮是否显示
        if (this.global.isAdmin) {
            this.isShowHandle = true;
        }
        // //切换管理部门
        // bus.$on("updateCurrentManageDeptId", currentManageDeptId => {
        //     if (currentManageDeptId == 1) {
        //         this.isShowHandle = true;
        //     } else {
        //         this.isShowHandle = false;
        //     }
        //     this.reset();
        // });
        this.getEduProfessions();
        this.getCategoryList();
        this.handleQueryProfessionClassList();
    },
    activated() {
        // this.getWorkflows();
    },
    watch: {
        showDialog(newVal, oldVal) {
            if (!newVal) {
                this.reset_add();
            }
        }
    },
    methods: {
        getEduProfessions() {
            findMinstryEduProfessionList(this.queryForm).then(res => {
                if (res.code == 200) {
                    //根据部门判断是否显示数据
                    // if (this.isShowHandle) {
                    this.tableData = res.data.list;
                    // this.model.pageNum_ = res.data.pageNum_;
                    // this.model.pageSize_ = res.data.pageSize_;
                    // this.model.total_ = res.data.total_;
                    this.queryForm.pageNum_ = res.data.pageNum_;
                    this.queryForm.pageSize_ = res.data.pageSize_;
                    this.queryForm.total_ = res.data.total_;
                    // } else {
                    // this.tableData = [];
                    // this.queryForm.pageNum_ = 1;
                    // this.queryForm.pageSize_ = 20;
                    // this.queryForm.total_ = 0;
                    /// }
                }
            });
        },
        isExist(rule, code, callback) {
            if (this.isEdit == ELECTIVE_TYPE.UPDATE) {
                callback();
            } else {
                isProCodeExist(code).then(res => {
                    if (res.code == 200) {
                        if (res.data)
                            callback(
                                new Error(this.$t("culture.rules.proCodeExist"))
                            );
                        else callback();
                    }
                });
            }
        },
        getCategoryList() {
            findCategoryList().then(res => {
                if (res.code == 200) {
                    for (let key in res.data) {
                        this.options.categoryCode.push({
                            value: res.data[key].code,
                            label: res.data[key].name
                        });
                    }
                }
            });
        },
        handleQueryProfessionClassList() {
            this.options.professionClass = [];
            this.queryForm.professionClassCode = null;
            let data = "";
            if (this.queryForm.categoryCode) {
                data = "?category=" + this.queryForm.categoryCode;
            }
            findProfessionClassList(data).then(res => {
                if (res.code == 200) {
                    for (let key in res.data) {
                        this.options.professionClass.push({
                            value: res.data[key].code,
                            label: res.data[key].name
                        });
                    }
                }
            });
        },
        handleModelProfessionClassList(isClear=true) {
            this.options.professionClass2 = [];
            if(isClear){
                this.model.professionClassCode=null;
            }
            let data = "";
            if (this.model.categoryCode) {
                data = "?category=" + this.model.categoryCode;
            }
            findProfessionClassList(data).then(res => {
                if (res.code == 200) {
                    for (let key in res.data) {
                        this.options.professionClass2.push({
                            value: res.data[key].code,
                            label: res.data[key].name
                        });
                    }
                }
            });
        },
        onPageSizeChange(size) {
            this.queryForm.pageSize_ = size;
            this.getEduProfessions();
        },
        onCurrentPageChange(currentPage) {
            this.queryForm.pageNum_ = currentPage;
            this.getEduProfessions();
        },
        formatDate(timenumber) {
            if (timenumber) return moment(timenumber).format("YYYY-MM-DD");
            else return "";
        },
        reset() {
            this.queryForm.categoryCode = "";
            this.queryForm.professionClassCode = "";
            this.queryForm.keyWord = "";
            this.getEduProfessions();
            this.handleQueryProfessionClassList();
        },
        confirm() {
            this.$refs.model.validate(valid => {
                if (!valid) {
                    return;
                }
                this.model.approvalTime = this.model.approvalTime / 1000;
                this.model.recruitStartTime =
                    this.model.recruitStartTime / 1000;
                this.model.stopTime = this.model.stopTime / 1000;
                this.model.againTime = this.model.againTime / 1000;
                if (this.isEdit === ELECTIVE_TYPE.TEXT) {
                    addEduPro(this.model).then(res => {
                        if (res.code == 200) {
                            this.$message({
                                type: "success",
                                message: this.$t("message.addSuccess")
                            });
                            this.showDialog = false;
                            this.getEduProfessions();
                        }
                    });
                } else {
                    updateEduPro(this.model).then(res => {
                        if (res.code == 200) {
                            this.$message({
                                type: "success",
                                message: this.$t("message.editSuccess")
                            });
                            this.showDialog = false;
                            this.getEduProfessions();
                        }
                    });
                }
            });
        },

        reset_add() {
            this.model.categoryCode = "";
            (this.model.professionClassCode = ""),
                (this.model.professionCode = ""),
                (this.model.professionName = ""),
                (this.model.professionNameEn = ""),
                (this.model.approvalTime = 0),
                (this.model.recruitStartTime = 0),
                (this.model.stopTime = 0),
                (this.model.againTime = 0),
                (this.model.useType = '1');
            this.options.professionClass2=[];
        },
        getEduProDetail(data) {
            findEduProByProCode(data).then(res => {
                if (res.code == 200) {
                    res.data.approvalTime = res.data.approvalTime * 1000;
                    res.data.recruitStartTime =
                        res.data.recruitStartTime * 1000;
                    res.data.stopTime = res.data.stopTime * 1000;
                    res.data.againTime = res.data.againTime * 1000;
                    this.model = res.data;
                    this.handleModelProfessionClassList(false);
                }
            });            
        },
        getdialogTitle(val) {
            if (val == 0) {
                return this.$t("culture.profession.addProfession");
            } else if (val == 1) {
                return this.$t("culture.profession.detailProfession");
            } else {
                return this.$t("culture.profession.editProfession");
            }
        },
        editProfession(data) {
            this.isEdit = ELECTIVE_TYPE.UPDATE;
            this.getEduProDetail(data);
            this.dialogTitle = this.getdialogTitle(this.isEdit);
            this.showDialog = true;
        },
        addProfession() {
            this.isEdit = ELECTIVE_TYPE.TEXT;
            this.reset_add();
            this.dialogTitle = this.getdialogTitle(this.isEdit);
            this.showDialog = true;
        },
        detailEduPro(data) {            
            findEduProByProCode(data).then(res => {
                if (res.code == 200) {
                    res.data.approvalTime = res.data.approvalTime * 1000;
                    res.data.recruitStartTime =
                        res.data.recruitStartTime * 1000;
                    res.data.stopTime = res.data.stopTime * 1000;
                    res.data.againTime = res.data.againTime * 1000;
                    this.model = res.data;
                    this.isEdit = ELECTIVE_TYPE.READONLY;
                    this.dialogTitle = this.getdialogTitle(this.isEdit);
                    this.showDialog = true;
                    this.handleModelProfessionClassList(false);
                }
            });
        },
        delProfession(data) {
            this.$delConfirm().then(() => {
                delEduProByCode(data).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            type: "success",
                            message: this.$t("message.deleteSuccess")
                        });
                        this.getEduProfessions();
                    }
                });
            });
        },
        exportEduPro() {
            let param={};
            if(this.queryForm.categoryCode!=null&&this.queryForm.categoryCode!=""){
                param.categoryCode=this.queryForm.categoryCode;
            }
            if(this.queryForm.professionClassCode!=null&&this.queryForm.professionClassCode!=""){
                param.professionClassCode=this.queryForm.professionClassCode;
            }
            if(this.queryForm.keyWord!=null&&this.queryForm.keyWord!=""){
                param.keyWord=this.queryForm.keyWord;
            }
            exportEduProfession(param);
        },
        resetFormValidate() {
            // this.model.categoryCode = "";
            this.$refs.model.resetFields();
        },
        cancel() {
            this.showDialog = false;
            // this.model.categoryCode = "";
        },
        importRecord(type) {
            if (type == "in") {
                this.$refs.uploadDialog.open();
            } else if (type == "out") {
                window.location.href = downloadUrl;
            }
        },
        // importFiles() {
        // 	this.$refs.uploadDialog.open();
        // },

        // downFiles() {
        // 	window.location.href = downloadUrl;
        // },
        clearFiles() {
            this.$refs.upload.clearFiles();
            this.fileList = [];
        },
        uploadFile() {
            if (_.isEmpty(this.fileList)) {
                this.$message({
                    type: "info",
                    message: this.$t("message.selectFilePlease")
                });
                return;
            }
            this.$refs.upload.submit();
            // this.$refs.uploadDialog.close();
        },
        beforeRemove(file, fileList) {
            this.$t("common.upload.remove") + ` ${file.name}？`;
        },
        beforeAvatarUpload(file) {
            let extName = file.name
                .substring(file.name.indexOf(".") + 1)
                .toLowerCase()
                .trim();
            if (extName !== "xls" && extName !== "xlsx") {
                this.$message({
                    type: "error",
                    message: this.$t("common.upload.unSupportesFileType")
                });
                this.clearFiles();
                return;
            }
            if (!(file.size / 1024 / 1024 < 3)) {
                this.$message({
                    type: "error",
                    message: this.$t("common.upload.sizeLimit3M")
                });
                this.clearFiles();
            }
        },

        uploadDone(res, file, fileList) {
            if (res.code == 200) {
                this.$message({
                    type: "success",
                    message: this.$t("common.tips.uploadSuccess")
                });
                this.$refs.uploadDialog.close();
            } else if (res.code == 300) {
                this.$message({
                    type: "error",
                    message: this.$t("culture.profession.uploadFileEmpty")
                });
                this.clearFiles();
            } else if (res.code == 301) {
                let resData = res.data;
                this.$message({
                    type: "error",
                    message:
                        this.$t("culture.profession.uploadParamError") +
                        ":" +
                        resData[0][0] +
                        resData[0][2]
                });
                this.clearFiles();
            } else if (res.code == 302) {
                this.$message({
                    type: "error",
                    message: res.msg
                });
                this.clearFiles();
            } else if (res.code == 500) {
                this.$message({
                    type: "error",
                    message: this.$t(
                        "culture.profession.uploadFileParsingError"
                    )
                });
                this.clearFiles();
            }
        },
        onError(err, file, fileList) {
            let msg = JSON.parse(err.message);
            this.$message({
                type: "error",
                message: msg.message
            });
        },
        getUseType(val){
            let option=this.options.useType.find(t=>t.value==val)
            return option?option.label:null
        }
    }
};
</script>

